// 功能点：
// 1. 头部导航栏效果
// 2. 登录及渲染



// 默认url头部
const defaultUrlHeader = 'http://127.0.0.1:3000';



// 1. 头部导航栏效果



// 头部
const header = document.querySelector('header');
// ul导航栏
const topNavUl = document.querySelector('.header-top-nav');
// 所有li
const topNavLis = document.querySelector('.header-top-nav').querySelectorAll('li');
// 所有li里的所有链接a
const topNavLiA = document.querySelectorAll('.music-text');
// 跟随鼠标移动的span
const topNavSpan = document.querySelector('.top-nav-span');



let topNavLisLength = topNavLis.length;



// 鼠标经过事件
for (let i = 0; i < topNavLisLength; i++) {

    topNavLis[i].addEventListener('mousemove', function (e) {
        topNavSpan.style.display = 'block';

        // 让span跟随鼠标移动
        topNavSpan.style.left = e.clientX - header.offsetLeft - topNavUl.offsetLeft + 10 + 'px';
        topNavSpan.style.top = e.clientY - header.offsetTop - topNavUl.offsetTop + 20 + 'px';
        topNavSpan.innerHTML = topNavLiA[i].innerHTML;
    })

    topNavLis[i].addEventListener('mouseout', function () {
        topNavSpan.style.display = 'none';
    })
}



// li点击事件
topNavLis[0].addEventListener('click', function () {
    topNavLis[1].className = '';
    this.className = 'default-selected';
})



topNavLis[1].addEventListener('click', function () {
    topNavLis[0].className = '';
    this.className = 'default-selected';
})



// 2. 登录及渲染



// 头部"登录"
const loginFont = document.querySelector('.login-font');
// 遮罩层
const bgMask = document.querySelector('.login-mask');
// 登录窗口
const loginBox = document.querySelector('.login');
// 手机号码输入框
const phoneNumberBox = document.querySelector('.phone-number');
// 密码输入框
const passwordBox = document.querySelector('.password');
// 手机号码提示框
var phoneWarning = document.querySelector('.phone-warning');
// 密码提示框
var pwdWarning = document.querySelector('.pwd-warning');
// 登录按钮
const loginBtn = document.querySelector('.login-confirm');
// 登录窗口 关闭按钮
const closeBtn = document.querySelector('.login').querySelector('.close-button');
// 头部"音乐馆"
const musicText = document.querySelector('.music-text');
// 头部"我的音乐"
const myMusic = document.querySelector('.my-music');
// 头部搜索放大镜
const searchButton = document.querySelector('.search-button');
// 头部输入框
const searchInputValue = document.querySelector('.search-input');
// 搜索页面
const searchArea = document.querySelector('.search-area');
// 未登陆页面
const noLoginArea = this.document.querySelector('.user-message-page');
// 未登陆界面 登录按钮
const noLoginBtn = document.querySelector('.no-login-button');
// 用户信息页
const userInfPage = document.querySelector('.user-inf-page');
// 用户信息页 头像
let userInfHead = document.querySelector('.user-inf-head');
// 用户信息页 昵称
let userInfName = document.querySelector('.user-inf-name');
// 用户信息页 签名
let userInfSign = document.querySelector('.user-inf-signature');
// "我的喜欢"
let myLove = document.querySelector('.user-likes-nav');
// "我的歌单"
let myCreatePlaylist = document.querySelector('.user-playlists-nav');



// 点击"登录"弹出登录窗口
loginFont.addEventListener('click', openLogin)



// 点击"x"关闭登录窗口
closeBtn.addEventListener('click', closeLogin)



// 手机输入框获得焦点，边框变色
phoneNumberBox.addEventListener('focus', function () {
    this.style.borderColor = '#8fb7ff';
})



// 手机输入框失去焦点，输入提示框消失
phoneNumberBox.addEventListener('blur', function () {
    this.style.borderColor = '';
    phoneWarning.style.visibility = 'none';
})



// 密码框获得焦点，边框变色
passwordBox.addEventListener('focus', function () {
    this.style.borderColor = '#8fb7ff';
})



// 密码框失去焦点，密码提示框消失
passwordBox.addEventListener('blur', function () {
    this.style.borderColor = '';
    pwdWarning.style.visibility = 'none';
})



// 关闭登录窗口和遮罩层的函数
function closeLogin() {
    loginBox.style.display = 'none';
    bgMask.style.display = 'none';
    // 同时清除输入框内容
    phoneNumberBox.value = '';
    passwordBox.value = '';
}



// 显示登录窗口和遮罩层的函数
function openLogin() {
    loginBox.style.display = 'block';
    bgMask.style.display = 'block';
}



// 显示未登陆界面的函数
function displayNoLoginArea() {
    noLoginArea.style.display = 'block';
    userInfPage.style.display = 'none';
}



// 显示用户信息页的函数
function displayUserMsgArea() {
    userInfPage.style.display = 'block';
    searchArea.style.display = 'none';
    userPlaylistsMiddleArea.style.display = 'none';
    playlistDetailMiddleArea.style.display = 'none';
}



// 验证登陆状态
ajaxRequest({
    url: `${defaultUrlHeader}/login/status`,

    success: function (responseText) {

        if (responseText.data.account == null) {
            console.log('当前未登录');

            // "我的音乐"点击弹出未登录界面
            myMusic.addEventListener('click', displayNoLoginArea)
        } else {
            console.log('当前已登录');
            console.log('用户id为' + responseText.data.account.id);

            // 点击loginFont(此时为一级头像)不再弹出登录框
            loginFont.removeEventListener('click', openLogin)
            // 点击"我的音乐"不再弹出未登录界面
            myMusic.removeEventListener('click', displayNoLoginArea)
            // 点击"我的音乐"弹出用户信息页
            myMusic.addEventListener('click', displayUserMsgArea)
            topNavLis[0].className = 'default-selected';

            // 关闭登录窗口和遮罩层
            closeLogin();
            // 渲染用户基本信息
            userInf(responseText.data.profile.avatarUrl, responseText.data.profile.nickname);
            // 点击"我的音乐"获取、刷新数据
            clickToUpdateData(responseText.data.account.id);
        }
    }
});



// 获取用户信息页的函数
function userPage(id) {
    ajaxRequest({
        url: `${defaultUrlHeader}/user/detail`,

        data: {
            uid: id
        },

        success: function (responseText) {
            console.log('获取用户详细信息成功');
            console.log(responseText);

            let head = responseText.profile.avatarUrl,
                signature = responseText.profile.signature,
                nickname = responseText.profile.nickname;

            // 渲染用户信息页
            userPageRender(head, signature, nickname);
        },

        error: function (xhr) {
            console.log('获取用户详细信息失败');
            console.log(xhr.readyState);
            console.log(xhr.status);
        }
    });
}



// 渲染用户信息页
function userPageRender(head, signature, nickname) {
    userInfHead.style.backgroundImage = `url(${head})`;
    userInfName.innerHTML = nickname;
    userInfSign.innerHTML = signature;
}



// 未登陆界面登录按钮点击事件
noLoginBtn.addEventListener('click', openLogin)



// "提交按钮"点击事件
// 验证输入信息正确后进行登录验证
loginBtn.addEventListener('click', function () {
    // 手机号码/邮箱、密码
    let phoneOrEmail = phoneNumberBox.value,
        pwd = passwordBox.value;

    // 判断手机输入是否为空
    if (phoneOrEmail == '') {
        phoneWarning.style.visibility = 'visible';
        phoneWarning.innerHTML = '你还没有输入手机号！';

        phoneNumberBox.addEventListener('focus', function () {
            phoneWarning.style.visibility = 'hidden';
        })
    }

    // 判断密码输入是否为空
    if (pwd == '') {
        pwdWarning.style.visibility = 'visible';
        pwdWarning.innerHTML = '你还没有输入密码！';

        passwordBox.addEventListener('focus', function () {
            pwdWarning.style.visibility = 'hidden';
        })
    }

    if (phoneOrEmail !== '' && pwd !== '') {
        if (phoneOrEmail.includes('com')) {

            // 邮箱登录
            ajaxRequest({
                url: `${defaultUrlHeader}/login`,

                data: {
                    email: phoneOrEmail,
                    password: pwd
                },

                success: function (responseText) {
                    if (responseText.message == '密码错误') {
                        pwdWarning.style.visibility = 'visible';
                        pwdWarning.innerHTML = responseText.message;
                    } else {
                        console.log('登陆成功');
                        console.log(responseText.profile.userId);

                        // 移除loginFont(此时为一级头像)弹出登录框事件
                        loginFont.removeEventListener('click', openLogin)
                        // 移除点击"我的音乐"弹出未登陆界面事件
                        // 隐藏未登录界面
                        myMusic.removeEventListener('click', displayNoLoginArea)
                        noLoginArea.style.display = 'none';
                        myMusic.addEventListener('click', displayUserMsgArea)

                        // 选中“音乐馆”
                        topNavLis[0].className = 'default-selected';
                        topNavLis[1].className = '';

                        // 关闭登录窗口和遮罩层
                        closeLogin();
                        // 渲染用户基本信息
                        userInf(responseText.profile.avatarUrl, responseText.profile.nickname);
                        // "我的音乐""我的喜欢""我的歌单"绑定点击刷新数据
                        clickToUpdateData(responseText.profile.userId);

                        // 本地存储
                        localStorage.setItem('phoneOrEmail', phoneOrEmail);
                        localStorage.setItem('pwd', pwd);
                    }
                },

                error: function (xhr) {
                    pwdWarning.style.visibility = 'visible';
                    pwdWarning.innerHTML = responseText.message;
                    console.log('登录失败');
                    console.log(xhr.readyState);
                    console.log(xhr.status);
                }
            });
        } else {

            // 手机登录
            ajaxRequest({
                url: `${defaultUrlHeader}/login/cellphone`,

                data: {
                    phone: phoneOrEmail,
                    password: pwd
                },

                success: function (responseText) {
                    if (responseText.message == '密码错误') {
                        pwdWarning.style.visibility = 'visible';
                        pwdWarning.innerHTML = responseText.message;
                    } else {
                        console.log('登陆成功');
                        console.log('用户id为 ' + responseText.profile.userId);

                        // 移除loginFont(此时为一级头像)弹出登录框事件
                        loginFont.removeEventListener('click', openLogin)
                        // 移除点击"我的音乐"弹出未登录界面事件
                        // 隐藏未登陆界面
                        myMusic.removeEventListener('click', displayNoLoginArea)
                        noLoginArea.style.display = 'none';
                        myMusic.addEventListener('click', displayUserMsgArea)

                        // 选中“音乐馆”
                        topNavLis[0].className = 'default-selected';
                        topNavLis[1].className = '';

                        // 关闭登录窗口和遮罩层
                        closeLogin();
                        // 渲染用户基本信息
                        userInf(responseText.profile.avatarUrl, responseText.profile.nickname);
                        // "我的音乐""我的喜欢""我的歌单"绑定点击刷新数据
                        clickToUpdateData(responseText.profile.userId);

                        // 本地存储
                        localStorage.setItem('phoneOrEmail', phoneOrEmail);
                        localStorage.setItem('pwd', pwd);
                    }
                },

                error: function (xhr) {
                    pwdWarning.style.visibility = 'visible';
                    pwdWarning.innerHTML = responseText.message;
                    console.log('登录失败');
                    console.log(xhr.readyState);
                    console.log(xhr.status);
                }
            });
        }
    }
})



// 点击"我的音乐"获取、刷新数据的函数
function clickToUpdateData(userId) {
    topNavLis[1].addEventListener('click', () => {
        // 获取用户信息页
        userPage(userId);
        // 获取歌单基本信息
        userPlaylist(userId);
        // 获取用户喜欢音乐id
        userLikelist(userId);
    })
}



// 全局变量，可被后面的退出登录函数使用
var displayHead = document.createElement('div');



// 渲染用户基本信息框
function userInf(headUrl, nickname) {
    // 让“登录字样消失”
    loginFont.innerHTML = '';

    // 一级头像节点
    // 添加节点 父元素为loginFont
    loginFont.appendChild(displayHead);
    displayHead.className = 'user-login';
    displayHead.style.backgroundImage = 'url(' + headUrl + ')';

    // 创建用户信息框节点
    let userLogin = document.createElement('div');
    userLogin.className = 'user-inf';
    // 添加节点 父元素为loginFont
    loginFont.appendChild(userLogin);

    // 鼠标经过/离开时，显示/隐藏用户信息框
    loginFont.addEventListener('mouseover', function () {
        userLogin.style.display = 'block';
    })

    loginFont.addEventListener('mouseout', function () {
        userLogin.style.display = 'none';
    })

    userLogin.addEventListener('mouseover', function () {
        this.style.display = 'block';
    })

    userLogin.addEventListener('mouseout', function () {
        this.style.display = 'none';
    })

    // 创建二级头像节点
    let userHead = document.createElement('div');
    // 添加节点到用户信息框
    userLogin.appendChild(userHead);
    userHead.className = 'user-head';
    userHead.style.backgroundImage = displayHead.style.backgroundImage;

    // 创建昵称节点
    let userName = document.createElement('span');
    // 添加节点 到用户信息框中的头像旁边
    userLogin.appendChild(userName);
    userName.className = 'user-name';
    userName.innerHTML = nickname;

    // 创建退出按钮节点
    let logout = document.createElement('button');
    // 添加节点到用户信息框
    userLogin.appendChild(logout);
    logout.className = 'user-logout';
    logout.innerHTML = '退出登录';

    // 点击退出按钮，退出登录
    logout.addEventListener('click', exitLogin)
}



// 退出登陆
function exitLogin() {
    ajaxRequest({
        url: `${defaultUrlHeader}/logout`,

        success: function (responseText) {
            console.log('退出登录成功');
            console.log(responseText);

            // "登录"重新绑定点击弹出登录框事件
            loginFont.addEventListener('click', openLogin)
            // "我的音乐"重新绑定点击弹出未登陆界面事件
            myMusic.addEventListener('click', displayNoLoginArea)
            myMusic.removeEventListener('click', displayUserMsgArea)

            // 退出登陆后，默认跳至主页
            userInfPage.style.display = 'none';
            topNavLis[0].className = 'default-selected';
            topNavLis[1].className = '';

            // 抹除一级头像
            // 退出登录函数操作此祖父节点，可把用户信息框一并抹除
            displayHead.className = '';
            loginFont.innerHTML = '登录';
        },

        error: function (xhr) {
            console.log('退出登录失败');
            console.log(xhr.readyState);
            console.log(xhr.status);
        }
    });
}



// 点击头部导航栏的搜索放大镜，将结果送至搜索详情界面
searchButton.addEventListener('click', () => {

    // 显示详情页面
    searchArea.style.display = 'block';
    searchFocus.value = searchInputValue.value;
    let inputValue = searchFocus.value;

    // 搜索渲染
    searchAndRender(inputValue);

    // 清空头部搜索框内的值
    searchInputValue.value = '';

    // 头部导航栏变化
    topNavLis[0].className = 'default-selected';
    topNavLis[1].className = '';
})



// 点击“音乐馆”切回主页
musicText.addEventListener('click', () => {
    searchArea.style.display = 'none';
    noLoginArea.style.display = 'none';
    userInfPage.style.display = 'none';
    songDisplayArea.style.display = 'none';
    searchInputValue.value = '';
})